<template>
	<!-- 上传视频或者图片 -->
	<view class="up-page">
		<!--图片-->
		<view class="show-box" v-for="(item,index) in imageList" :key="index">
			<image class="full" :src="item" :data-src="image" @tap="previewImage(index)">
			</image>
			<view class="delect-icon" @tap="delect(index)">
				<image class="full" :src="clearIcon" mode=""></image>
			</view>
		</view>
		<!--视频-->
		<view class="show-box" v-for="(item, index) in videoList" :key="index">
			<video class="full" :src="item"></video>
			<view class="delect-icon" @tap="delectVideo(index)">
				<image class="full" :src="clearIcon" mode=""></image>
			</view>
		</view>
		<!--文件-->
		<view class="show-box" v-for="(item, index) in fileList" :key="index">
			<image class="full" :src="fileIcon" @tap=""></image>
			<view class="delect-icon" @tap="delectFile(index)">
				<image class="full" :src="clearIcon" mode=""></image>
			</view>
		</view>

		<view v-if="showUploadButton" @tap="chooseType" class="box-mode">
			<image class="full" :src="selectfile" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	];
	export default {
		data() {
			return {
				// 图标
				clearIcon: '',
				selectfile: '/static/icon/public/add-file.png',
				fileIcon:'',
				showUploadButton: true, // 页面图片或视频数量超出后，拍照按钮隐藏
				imageList: [], //存放图片的地址
				imageMaxCount: 9, //图片允许上传的总数
				videoList: [], //视频存放的地址
				videoMaxCount: 9, //视频允许上传的总数
				fileList: [], //文件存放的地址
				fileMaxCount: 9, //文件允许上传的总数
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				sourceTypeIndex: 2,
				cameraList: [{
					value: 'back',
					name: '后置摄像头',
					checked: 'true'
				}, {
					value: 'front',
					name: '前置摄像头'
				}],
				cameraIndex: 0, //上传视频时的方式
				maxCount: 27, //图片和视频允许上传的总数
			}
		},
		methods: {
			returnFiles() {
				console.log('123213123123')
				this.$emit('returnFiles', {
					imageList: this.imageList,
					videoList: this.videoList,
					fileList: this.fileList,
				})
			},
			//点击上传类型
			chooseType() {
				this.chooseImages();
				return
				uni.showActionSheet({
					title: '选择上传类型',
					// itemList: ['上传图片', '上传视频', '上传文件'],
					itemList: ['上传图片', '上传视频'],
					success: res => {
						switch (res.tapIndex) {
							case 0:
								this.chooseImages();
								break;
							case 1:
								this.chooseVideo();
								break;
							case 2:
								this.chooseFile();
								break;
							default:
								break;
						}
					}
				});

			},
			//上传图片
			async chooseImages() {
				uni.chooseImage({
					count: this.imageMaxCount, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						uni.showLoading({
							title: '正在上传...'
						})
						let tempFilePaths = res.tempFilePaths
						tempFilePaths.forEach(async ele => {
							let oss_url = await this.uploadFile(ele)

							this.imageList = this.imageList.concat(oss_url);
							if (this.imageList.length >= this.imageMaxCount) {
								this.showUploadButton = false; //图片上传数量和count一样时，让点击拍照按钮消失
								this.imageList = this.imageList.slice(0, this.imageMaxCount)
							}
							this.returnFiles()
						})
						uni.hideLoading()
					}
				})
			},
			//上传视频
			async chooseVideo(index) {
				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: this.videoMaxCount,
					compressed: false,
					camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
					sourceType: sourceType[this.sourceTypeIndex],
					success: async (res) => {
						uni.showLoading({
							title: '正在上传...'
						})
						let oss_url = await this.uploadFile(res.tempFilePath)
						uni.hideLoading()
						this.videoList = this.videoList.concat(oss_url);
						if (this.videoList.length == this.videoMaxCount) {
							this.showUploadButton = false;
						}
						console.log(this.videoList);
						this.returnFiles()
					}
				})
			},
			//上传文件
			async chooseFile() {
				// #ifdef MP-WEIXIN
				console.log('上传文件')
				wx.chooseMessageFile({
					count: this.fileMaxCount,
					type: 'file',
					success(res) {
						uni.showLoading({
							title: '正在上传...'
						})

						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFiles
						console.log(tempFilePaths, 'tempFilePaths')
						tempFilePaths.forEach(async ele => {
							let oss_url = await this.uploadFile(ele)
						
							this.fileList = this.fileList.concat(oss_url);
							if (this.fileList.length >= this.fileMaxCount) {
								this.showUploadButton = false; //图片上传数量和count一样时，让点击拍照按钮消失
								this.fileList = this.fileList.slice(0, this.fileMaxCount)
							}
							this.returnFiles()
						})

						uni.hideLoading()
					},
					fail: (err) => {
						console.log(err, '上传文件err')
					}
				})
				// #endif
			},
			//预览图片
			previewImage: function(e) {
				console.log(e)
				uni.previewImage({
					current: e,
					urls: this.imageList
				});
			},
			// 删除图片
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
						if (this.imageList.length == this.imageMaxCount) {
							this.showUploadButton = false;
						} else {
							this.showUploadButton = true;
						}
						this.returnFiles()
					}
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
						if (res.confirm) {
							this.videoList.splice(index, 1);
						}
						if (this.videoList.length == this.videoMaxCount) {
							this.showUploadButton = false;
						} else {
							this.showUploadButton = true;
						}
						this.returnFiles()
					}
				});
			},
			// 删除文件
			delectFile(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此文件',
					success: res => {
						if (res.confirm) {
							this.fileList.splice(index, 1);
						}
						if (this.fileList.length == this.fileMaxCount) {
							this.showUploadButton = false;
						} else {
							this.showUploadButton = true;
						}
						this.returnFiles()
					}
				});
			},

			async uploadFile(file) {
				console.log(file, 'filefilefile')
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: "https://xcx.zhufuguihuoguo.com/api/common/upload",
						name: 'file',
						header: {
							// 'token': uni.getStorageSync('token')
						},
						// #ifdef MP-ALIPAY
						fileType: 'image',
						// #endif
						filePath: file,
						success: (res) => {
							let data = JSON.parse(res.data)
							if (data.code == 1) {
								// let oss_url = this.BASE_IMG_URL+ data.data.flie_url
								let oss_url = data.data.fullurl
								resolve(oss_url)
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
								reject(res)
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				})

			},


		}
	}
</script>
<style lang="scss">
	/* 统一上传后显示的盒子宽高比 */
	.box-mode {
		width: 100%;
		height: 100%;

		overflow: hidden;
	}

	.full {
		width: 100%;
		height: 100%;
	}

	.up-page {
		width: 100%;
		// display: flex;
		// flex-wrap: wrap;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 30rpx;

		.show-box:nth-child(3n) {
			margin-right: 0;
		}

		.show-box {
			position: relative;
			margin-bottom: 4vw;
			margin-right: 4vw;
			@extend .box-mode;

			.delect-icon {
				height: 40rpx;
				width: 40rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				z-index: 1000;
			}
		}
	}
</style>